/*
 * 设备账号列表
 * @Author: ljb
 * @Date: 2018-03-27 17:53:05
 * @Last Modified by: ljb
 * @Last Modified time: 2019-04-28 16:26:47
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

</style>
<template>
	<div class="v-store-device-account-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="accounts"
			:height="tableHeight()"
			border
			class="personal-scrollbar"
			@on-sort-change="sortable"/>

	</div>
</template>

<script>

import Button from 'iview/src/components/button';
import Icon from 'iview/src/components/icon';

import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'DeviceAccountIndex',
	mixins: [computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		accounts: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('device.account'),
					key: 'account',
					align: 'center',
					render: (h, { row }) => <div> { row.account || '-' } </div>,
				},
				{
					title: this.$t('device.device_name'),
					key: 'device_name',
					align: 'center',
					render: (h, { row }) => <div> { row.device_name || '-' } </div>,
				},
				{
					title: this.$t('device.equipment_number'), // '设备名称',
					key: 'uuid',
					align: 'center',
					render: (h, { row }) => <div> { row.uuid || '-' } </div>,
				},
				{
					title: this.$t('device.account_status'),
					key: 'enabled',
					align: 'center',
					render: (h, { row }) => <div>
						{
							row.enabled
								? <Icon type="checkmark"></Icon>
								: <Icon type="close"></Icon>
						}
					</div>,
				},
				{
					title: this.$t('device.geographical_location'), // '地理位置',
					key: 'location',
					align: 'center',
					render: (h, { row }) => <div> { this.valueOrUnknown(row.location) } </div>,
				},
				{
					title: this.$t('device.alive_seconds'), // '在线时长',
					key: 'alive_seconds',
					align: 'center',
					render: (h, { row }) => <div> { this.formatSecondToDateTime(row.alive_seconds) } </div>,
				},
				{
					title: this.$t('common.created_at'),
					key: 'created_at',
					align: 'center',
					// sortable: 'custom',
					render: (h, { row }) => <div> { !row.created_at ? '-' : row.created_at } </div>,
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 120,
					render: (h, { row }) => (
						<div>
							<Button name="index__edit" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{ this.$t('device.update_account') }
							</Button>

						</div>
					),
				},
			],
		};
	},
	methods: {

		/**
		 * 显示value或者未知
		 * @param  {String} value {需要进行判断的value值}
		 * @return {String} {value或者未知}}
		 */
		valueOrUnknown(value) {
			return value || this.$t('common.unknown');
		},

		/**
		 * 把秒转成时分秒格式
		 * @param  {Number} alive_seconds {秒数}
		 * @return {String} {时分秒格式}
		 */
		formatSecondToDateTime(alive_seconds) {
			if (typeof Number(alive_seconds) !== 'number') return this.$t('common.unknown');

			const hours = Math.floor(Number(alive_seconds) / 3600);
			const minutes = Math.floor(Number(alive_seconds - (hours * 3600)) / 60);
			const seconds = Number(alive_seconds) % 60;

			return `${this.formatNumber(hours)}:${this.formatNumber(minutes)}:${this.formatNumber(seconds)}`;
		},

		/**
		 * 格式数字
		 * @param  {Number} number {需要格式的数字}
		 * @return {Number} {格式完的数字}
		 */
		formatNumber(number) {
			if (number < 10) return `0${number}`;
			return number;
		},

		/**
         * 排序的回调
         * @param  {Object} param {对应列的属性对象,里面包含了column列属性，key值，order排序字段}
         * @return {undefined}
         */
		sortable(param) {
			const search_param = {

				order_by: param.key,

				sort: param.order === 'normal' ? '' : param.order,

			};

			this.$emit('sort', search_param);
		},

	},
};

/* 停用账号按钮 */
// {
// 					row.enabled
// 						?
// 						<Button name="index__disable" size="small" on-click={() => { this.$emit('disabled', row); }} type="error">
// 							{ this.$t('device.disuse_account') }
// 						</Button>
// 						:
// 						<Button name="index__enable" size="small" on-click={() => { this.$emit('enabled', row); }} type="success">
// 							{ this.$t('device.use_account') }
// 						</Button>
// 				}
</script>
